<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>注册</title>

		<link rel="stylesheet" type="text/css" href="/resources/common/css/bootstrap4/bootstrap.min.css">
    	<link href="/resources/common/css/global.css" rel="stylesheet">
	</head>

		
<body>
	
	<div class="fixedNavbar">
		<#include "navbar.html">
	</div>

   
    <div class="container" style="margin-top:15px;">
        <form id="registerForm" class="form-horizontal" role="form">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所在省</label>
                        <div class="col-sm-3">
                            <select name="province" id="province" class="form-control">
                                <option value="default">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所在市</label>
                        <div class="col-sm-3">
                            <select name="city" id="city" class="form-control">
                                <option value="default">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-3">
                            <input class="form-control" name="username" id="username" placeholder="请输入管理员姓名">
                        </div>
                        <span class="col-xs-6 help-block" style="color:red;"></span>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">管理员邮箱</label>
                        <div class="col-sm-3">
                            <input type="email" class="form-control" name="email" id="email" placeholder="输入邮箱">
                        </div>
                        <span class="col-xs-6 help-block" style="color:red;"></span>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-3">
                            <input type="password" class="form-control" name="password" id="password" placeholder="请输入管理员密码">
                        </div>
                        <span class="col-xs-6 help-block" style="color:red;"></span>
                    </div>
                    <div class="form-group">
                        <label for="verifyCode" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="verifyCode" id="verify-code" placeholder="请输入下方验证码">
                            <img src = "/verify/sendcode" style = "float:left;display:inline-block;cursor:pointer;" id = "verify-code-img"/>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-3">
                                <button type="submit" id="btn-register" class="btn btn-primary">马上注册</button>
                            	<label id="register-hint" class="error" for="submit"></label>
                            </div>
                        </div>
                    </div>
               </div>
             </div>
        </form>
    </div>

	<div class="fixedNavbar">
		<#include "footer.html">
	</div>



	<script src="/resources/common/js/jquery-3.3.1.min.js" ></script>
	<script src="/resources/common/js/popper.min.js" ></script>
	<script src="/resources/common/js/util.js" ></script>
	<script src="/resources/common/js/sha1.js" ></script>
	<script src="/resources/common/js/jquery.validate.js" ></script>
	<script src="/resources/common/js/bootstrap4/bootstrap.min.js"></script>


      <script>
    	$(function(){
    		//1.0  文本验证码
    		$("#verify-code-img").bind("click", function(e) {
				this.src = "/verify/sendcode?d=" + new Date(); 
			});
    		
    		//2.0处理注册表单
			$.validator.addMethod("valueNotEquals", function(value, element, arg){
				return arg != value;
			}, "Value must not equal arg.");

			$("#registerForm").validate({
				rules: {
					province: {
						valueNotEquals: "default"
					},
					city: {
						valueNotEquals: "default"
					},
					username: {
						required: true,
					    minlength: 2,
						maxlength: 20
					},
					password: {
						required: true,
						minlength: 6,
						maxlength: 14
					},
					email: {
						required: true,
						email: true,
					},
					verifyCode: {
						required: true,
						remote: {
					        url: "verify/checkVerifyCode"
					    } 
					} 
				},
				messages: {
					province:{ 
						valueNotEquals: "所在省不能为空"
					},
					city: {
						valueNotEquals: "所在市不能为空"
					},
					username: {
						required: '请设置用户名',
					    minlength: '长度太短',
						maxlength: '太长了兄弟'
					},
					password: {
						required: "密码不能为空",
						minlength: "请输入6~14个字符",
						maxlength: "请输入6~14个字符"				
					},
					email: {
						required: "邮箱不能为空",
						email: "请输入正确邮箱地址"
					},
					verifyCode: {
				       required: "验证码不能为空",
				       remote: "验证码错误"
				    }
				},
				submitHandler : function(form) {
					debugger;
					$("#register-hint").text("正在运行,请稍后...").show();
					$('#btn-register').attr('disabled', 'disabled');
					var province = $("#province").val();
					var city = $("#city").val();
					var username = $("#username").val();
					var email = $("#email").val();
					var password = $("#password").val();
					
					var url = "/user/reg/"+username;
					var params = {  
						province:province,
						city:city,
						email:email,
						password:hex_sha1('' + $('#password').val()),
					};
					
				 	$.post(url, params, function (data) {
                        $("#register-hint").text('').show();
                        // var data = jQuery.parseJSON(data);
                        if (data.code == 200) {
                            $("#register-hint").text('注册成功...').show();
                            alert('注册成功!');
                            location.href = '/login';
                        } else {
                            $("#register-hint").text("注册失败").show();
                            $('#btn-register').removeAttr('disabled');
                        }//end if
                    });//end common post
				}
			});
    	
		
			//初始化省份数据
			util.remoteInvoke("/basedata/getProvinceData", {}, function(data) {
				if(data) {
					for(var i = 0; i < data.length; i++) {
						var $option = $('<option></option>');
						$option.val(data[i].province);
						$option.text(data[i].province);
						$option.attr("provinceId", data[i].provinceId);
						$("#province").append($option);
					}
				}
			});
			
			$("#province").bind("change", function(e) {
				var provinceId = $("#province").find("option:selected").attr("provinceId");
				
				if(!provinceId) {
					$('#city').empty();
					var $option = $('<option></option>');
					$option.val(0);
					$option.text("请选择");
					$("#city").append($option);
					return false;
				}
				
				var params = {
					// provinceId : provinceId
				};
				
				util.remoteInvoke("/basedata/getCityData/"+provinceId, params, function(data) {
					$('#city').empty();
					var $option = $('<option></option>');
					$option.val(0);
					$option.text("请选择");
					$("#city").append($option);
					
					if(data) {
						for(var i = 0; i < data.length; i++) {
							var $option = $('<option></option>');
							$option.val(data[i].city);
							$option.text(data[i].city);
							$option.attr("cityId", data[i].cityId);
							$("#city").append($option);
						}
					}
				});
			});
			
			$("#city").bind("change", function(e) {
				var cityId = $("#city").find("option:selected").attr("cityId");
				if(!cityId) {
					$('#district').empty();
					var $option = $('<option></option>');
					$option.val(0);
					$option.text("请选择");
					$("#district").append($option);
					return false;
				}
				
				var params = {
					// cityId : cityId
				};
				util.remoteInvoke("/basedata/getDistrictData/"+cityId, params, function(data) {
					$('#district').empty();
					var $option = $('<option></option>');
					$option.val(0);
					$option.text("请选择");
					$("#district").append($option);
					
					if(data) {
						for(var i = 0; i < data.length; i++) {
							var $option = $('<option></option>');
							$option.val(data[i].district);
							$option.text(data[i].district);
							$option.attr("districtId", data[i].districtId);
							$("#district").append($option);
						}
					}
				});
			});


			
    	});
    </script>
	</body>
</html>